<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态博客网站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>王树森的博客</h1>
        <nav>
            <button id="login-button">登录</button>
        </nav>
    </header>

    <main>
        <section id="blog-posts">
            <h2>博客文章</h2>
            <article>
                <h3>如何在30岁成为百万富翁</h3>
                <p>这是一篇关于如何在30岁成为百万富翁的示例文章。</p>
            </article>
            <article>
                <h3>如何在30岁败光百万家产</h3>
                <p>这是一篇关于如何在30岁败光百万家产的示例文章。</p>
            </article>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 我的博客</p>
    </footer>
	
    <script src="script.js"></script>
	
	<!-- 登录弹窗 -->
	<div id="login-popup" class="popup hidden">
		<div class="popup-content">
			<span class="close-button" id="close-login"></span>
			<h2>登录</h2>
			<form id="login-form">
				<label for="username">用户名:</label>
				<input type="text" id="username" name="username" required>
				<label for="password">密码:</label>
				<input type="password" id="password" name="password" required>
				<button type="submit">登录</button>
			</form>
		</div>
	</div>
</body>
</html>